<template>
	<div class="song-list">
		<u-cell :title="title" :titleStyle="{ fontWeight: '700' }" :border="false"></u-cell>
		<div class="items">
			<block v-for="(item, index) in transferData" :key="item.id">
				<div class="item" @click="$u.route(`/pages/list/index?title=${item.name}`)">
					<div class="item-left">
						<div class="intro">
							<div class="title u-line-1">{{ item.name }}</div>
							<div class="list" v-for="(iten, indey) in item.tracks.slice(0, 3)" :key="iten.id">
								<div class="info u-line-1">{{ indey + 1 }}. {{ iten.name }} - {{ iten.ar[0].name }}</div>
							</div>
						</div>
					</div>
					<div class="item-right">
						<image :src="pictureSize(item.coverImgUrl, 200, 200)" mode=""></image>
						<div class="play-counter">{{ formatCount(item.playCount) }}</div>
					</div>
				</div>
			</block>
		</div>
	</div>
</template>

<script>
import { formatCount } from '@/utils/formatCount.js';
import { pictureSize } from '@/utils/pictureSize.js';
export default {
	props: {
		title: {
			type: String,
			default: ''
		},
		transferData: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {};
	},
	methods: {
		formatCount,
		pictureSize
	}
};
</script>

<style lang="scss" scoped>
/deep/ .u-cell__body {
	padding: 20rpx 0;
}
.items {
	.item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 10rpx;
		width: 710rpx;
		.item-left {
			flex: 2;
			height: 220rpx;
			display: flex;
			align-items: center;
			background-color: #eeeeee;
			border-radius: 8rpx 0 0 8rpx;
			margin-bottom: 8rpx;
			.intro {
				padding-left: 20rpx;
				font-size: 30rpx;
				padding-right: 30rpx;
				.title {
					padding-bottom: 20rpx;
				}
				.info {
					font-size: 26rpx;
					color: #444444;
					padding-bottom: 6rpx;
				}
			}
		}
		.item-right {
			flex-shrink: 0;
			position: relative;
			image {
				width: 220rpx;
				height: 220rpx;
				border-radius: 0 8rpx 8rpx 0;
			}
			.play-counter {
				position: absolute;
				bottom: 8rpx;
				right: 0;
				background-color: rgba(0, 0, 0, 0.5);
				color: #fff;
				font-size: 18rpx;
				padding: 2rpx 8rpx;
				border-radius: 4rpx;
			}
		}
	}
}
</style>
